<template>
  <div
    v-if="mode === 'background'"
    :style="backgroundStyle"
    class="processed-background"
    v-bind="$attrs"
  >
    <slot></slot>
    <!-- 如果需要在背景容器中插入内容 -->
  </div>
  <img v-else :src="processedSrc" v-bind="$attrs" class="processed-image" />
</template>

<script setup>
import { computed } from 'vue';
import {
  generateQiniuImageUrl,
  defaultImageParams,
} from '@/utils/qiniuImageProcessor';

// 定义 props
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  params: {
    type: String,
    default: defaultImageParams,
  },
  mode: {
    type: String,
    default: 'img', // 默认为 img 模式，可选值: 'img' | 'background'
  },
});

// 处理图片 URL
const processedSrc = computed(() =>
  generateQiniuImageUrl(props.src, props.params),
);

// 如果是背景模式，生成背景样式
const backgroundStyle = computed(() => ({
  backgroundImage: `url(${processedSrc.value})`,
  backgroundSize: 'cover', // 背景适配容器大小
  backgroundPosition: 'center', // 居中背景图
  backgroundRepeat: 'no-repeat', // 防止背景图重复
}));

// 传递其他属性
defineExpose();
</script>

<style scoped lang="scss">
.processed-image {
  max-width: 100%;
  width: auto;
  height: auto;
}

.processed-background {
  width: 100%;
  height: 100%;
}
</style>
